<template>
  <div style="width: 500px;height: 500px">
    <div class="custom-container">
      <div class="custom-A">
        <img src="https://picsum.photos/1200/1200?random=1" alt="">
      </div>
      <div class="custom-B">
        <img src="https://picsum.photos/1200/1200?random=2" alt="">
      </div>
      <div class="custom-C">
        <img src="https://picsum.photos/1200/1200?random=3" alt="">
      </div>
      <div class="custom-D">
        <img src="https://picsum.photos/1200/1200?random=4" alt="">
      </div>
      <div class="custom-E">
        <img src="https://picsum.photos/1200/1200?random=5" alt="">
      </div>
    </div>
  </div>

</template>

<style>

.custom-container {
  --scale: 1.25;
  --rotation: 360deg;
  position: relative;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: calc(60% - 0px); /* subtracting the gap */
  max-height: calc(60% - 0px); /* subtracting the gap */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 4px;
  grid-template-areas:
    "custom-E custom-B custom-B"
    "custom-E custom-A custom-C"
    "custom-D custom-D custom-C";
}

.custom-container > div {
  width: 100%;
  height: 100%;
  position: relative;
  border: 3px solid #431312;
  border-radius: 5px;
  overflow: hidden;
}

.custom-A {
  grid-area: custom-A;
}
.custom-B {
  grid-area: custom-B;
}
.custom-C {
  grid-area: custom-C;
}
.custom-D {
  grid-area: custom-D;
}
.custom-E {
  grid-area: custom-E;
}

.custom-container > div img {
  --scale: 1;
  --rotation: -360deg;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260%;
  height: 260%;
  object-fit: cover;
  object-position: center;
}

.custom-container,
.custom-container > div img {
  animation: 10s scale-up both ease-in-out infinite alternate;
}

@keyframes scale-up {
  0% {
    transform: translate(-50%, -50%) scale(var(--scale)) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(var(--rotation));
  }
}


</style>

<script setup>
</script>
